<template>
  <el-row>
    <el-col :span="24">
      <img :src="info.banner" class="banner-imgs" style="cursor: pointer" />
    </el-col>
  </el-row>
  <div class="home-main">
    <el-row class="btn-row">
      <el-button
        type="primary"
        @click="proRegisterShow"
        v-if="info.registrationType == '1' && !info.isSign"
        >报名入口</el-button
      >
      <el-button
        type="primary"
        @click="handleProRegister(joinUserInfo)"
        v-else-if="info.registrationType == '0' && !info.isSign"
        >点击加入</el-button
      >
      <el-button
        type="primary"
        v-else-if="info.registrationType == '1' && info.isSign"
        >已报名</el-button
      >
      <el-button
        type="primary"
        v-else-if="info.registrationType == '0' && info.isSign"
        >已加入</el-button
      >
      <div v-if="info.registrationType == '1'" class="time-box">
        报名时间：{{ info.registrationStartTime }} 至
        {{ info.registrationEndTime }}
      </div>
    </el-row>
    <el-row class="detail-menu">
      <el-col :span="24">
        <el-menu
          :default-active="activeName"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item index="Info">{{
            labelConfig.text[proType]
          }}</el-menu-item>
          <el-menu-item index="Notice">通知公告</el-menu-item>
          <el-sub-menu index="TaskList" @click="handleSelect('TaskList')">
            <template #title>阶段任务</template>
            <el-menu-item index="Task">任务</el-menu-item>
            <el-menu-item index="Plan">进度</el-menu-item>
            <el-menu-item index="Information">资料</el-menu-item>
            <el-menu-item index="Result">成果</el-menu-item>
            <el-menu-item index="Statistics">统计</el-menu-item>
          </el-sub-menu>
          <el-menu-item index="Charts">知识图谱</el-menu-item>
          <el-menu-item index="Excellent">优秀作品</el-menu-item>
          <el-menu-item index="Problems">答疑解惑</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
    <div label="任务介绍" name="Info">
      <Info
        :projectId="projectId"
        v-if="projectId && activeName == 'Info'"
      ></Info>
    </div>
    <div label="阶段任务" name="Task">
      <Task
        :projectId="projectId"
        v-if="projectId && activeName == 'Task'"
      ></Task>
    </div>
    <div label="计划" name="Plan">
      <Plan
        :projectId="projectId"
        v-if="projectId && activeName == 'Plan'"
      ></Plan>
    </div>
    <div label="通知公告" name="Notice">
      <Notice
        :projectId="projectId"
        v-if="projectId && activeName == 'Notice'"
      ></Notice>
    </div>
    <div label="学习资料" name="Information">
      <Information
        :projectId="projectId"
        v-if="projectId && activeName == 'Information'"
      ></Information>
    </div>
    <div label="学习成果" name="Result">
      <Result
        :projectId="projectId"
        v-if="projectId && activeName == 'Result'"
      ></Result>
    </div>
    <div name="proRegister">
      <ProRegister
        :projectId="projectId"
        v-if="projectId && activeName == 'proRegister' && userInfo"
        :userInfo="userInfo"
        @confirm="handleProRegister"
      ></ProRegister>
    </div>
    <div
      v-if="projectId && activeName == 'Charts'"
      style="text-align: center; padding: 50px 0; font-weight: bold"
    >
      <Charts
        :projectId="projectId"
        v-if="projectId && activeName == 'Charts'"
      ></Charts>
      面向实验实践的新一代知识图谱，研制中……
    </div>
    <div v-if="projectId && activeName == 'Excellent'">
      <Excellent
        :projectId="projectId"
        v-if="projectId && activeName == 'Excellent'"
      ></Excellent>
    </div>
    <div v-if="projectId && activeName == 'Problems'">
      <Problems
        :projectId="projectId"
        v-if="projectId && activeName == 'Problems'"
      ></Problems>
    </div>
    <div
      v-if="projectId && activeName == 'Statistics'"
      style="text-align: center; padding: 50px 0; font-weight: bold"
    >
      <Statistics
        :projectId="projectId"
        v-if="projectId && activeName == 'Statistics'"
      ></Statistics>
    </div>
  </div>
</template>
<script setup name="ProjectDetail">
import { ref } from "vue";
import Info from "./components/info.vue";
import Task from "./components/task.vue";
import Result from "./components/result.vue";
import Excellent from "./components/excellent.vue";
import Information from "./components/information.vue";
import Notice from "./components/notice.vue";
import Problems from "./components/problems.vue";
import Statistics from "./components/statistics.vue";
import Charts from "./components/charts.vue";
import ProRegister from "./proRegister.vue";
import { getProjectInfo, joinProject } from "@/api/home/home";
import { getUserProfile } from "@/api/system/user";
import Plan from "./components/plan.vue";
import { getToken } from "@/utils/auth";
const { proxy } = getCurrentInstance();

const route = useRoute();
const router = useRouter();

const activeName = ref("Info");

const projectId = ref("");
const proType = ref("");
const registerVisible = ref(false);
const userInfo = ref({});
const joinUserInfo = ref({});
const info = ref({});
let heightimg = ref("0px");
const labelConfig = {
  teacher: {
    2: "主讲人",
    3: "负责人",
    4: "负责人",
    24: "主办方",
    25: "主办方",
    26: "负责人",
  },
  text: {
    2: "课程介绍",
    3: "实验介绍",
    4: "项目介绍",
    24: "竞赛介绍",
    25: "研学特色",
    26: "活动介绍",
  },
  proTime: {
    2: "课程时间",
    3: "实验时间",
    4: "项目时间",
    24: "比赛时间",
    25: "研学时间",
    26: "活动时间",
  },
};
function handleSelect(val) {
  if (val != "info" && val != "Excellent" && val != "Problems") {
    if (!getToken()) {
      proxy.$modal.msgError("请登录");
      activeName.value = "Info";
      return false;
    } else if (!info.value.isSign && val != "proRegister") {
      activeName.value = "Info";
      proxy.$modal.msgError("请加入活动");
      return false;
    }
  }
  if (val == "TaskList") {
    activeName.value = "Task";
  } else {
    activeName.value = val;
  }
}
function beforeHandle() {
  if (activeName.value != "info") {
    if (!getToken()) {
      proxy.$modal.msgError("请登录");
      activeName.value = "Info";
      return false;
    } else if (!info.value.isSign && activeName.value != "proRegister") {
      activeName.value = "Info";
      proxy.$modal.msgError("请加入活动");
      return false;
    }
  }
}
//基本信息
function getInfo() {
  getProjectInfo({ id: projectId.value }).then((res) => {
    info.value = res.data;
    proType.value = res.data.proType;
    setTimeout(() => {
      heightimg.value =
        document.getElementsByClassName("banner-imgs")[0].offsetHeight + "px";
    }, 100);
    window.addEventListener("resize", handleResize);
  });
}

//打开报名
function proRegisterShow() {
  if (!getToken()) {
    proxy.$modal.msgError("请登录");
    activeName.value = "Info";
    return false;
  }
  activeName.value = "proRegister";
}
//报名/加入
function handleProRegister(params) {
  // registerVisible.value = false;
  joinProject({ ...params, proId: projectId.value }).then((res) => {
    proxy.$modal.msgSuccess("报名成功");
    activeName.value = "Info";
    getInfo();
  });
}
function getUser() {
  getUserProfile().then((response) => {
    userInfo.value = response.data;
    joinUserInfo.value = {
      nickName: userInfo.value.nickName,
      email: userInfo.value.email,
      telephone: userInfo.value.telephone,
      unit: userInfo.value.unit,
      userId: userInfo.value.userId,
      status: "0",
    };
  });
}
//自适应轮播图
let handleResize = () => {
  heightimg.value =
    document.getElementsByClassName("banner-imgs")[0].offsetHeight + "px";
};

onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
});
onMounted(() => {
  projectId.value = route.query.projectId;
  proType.value = route.query.typeId;
  if (route.query.tabName) {
    if (getToken()) {
      activeName.value = route.query.tabName;
    }
  }
  if (getToken()) {
    getUser();
  }
  getInfo();
});
</script>
<style scoped lang="scss">
.el-tabs {
  :deep(.el-tabs__item) {
    font-size: 16px;
    font-weight: bold;
  }
  :deep(.el-tabs__active-bar) {
    height: 5px;
    border-radius: 10px;
  }
}
.btn-row {
  margin: 10px 0;
  position: absolute;
  right: 0;
  top: -10px;
  z-index: 999;
  .el-button {
    padding: 20px 30px;
    font-size: 18px;
    background: linear-gradient(to right, #92c0ff, #3f92ff);
  }
}
.time-box {
  line-height: 50px;
  padding-left: 30px;
}
.home-main {
  position: relative;
  margin-top: 20px;
}
.detail-menu {
  :deep(.el-menu-item) {
    font-size: 16px;
    font-weight: bold;
  }
  :deep(.el-sub-menu__title) {
    font-size: 16px;
    font-weight: bold;
  }
}
</style>